<template>
  <view class="logistics_wrapper">
    <view class="header_wrapper">
      <view class="left_">
        <image :src="httpUrlFn(ordersDetails.pic)"></image>
      </view>
      <view class="right_">
        <view
          >物流公司：<text>{{ ordersDetails.deliveryCompany || "" }}</text></view
        >
        <view>
          <view>
            快递单号：<text>{{ ordersDetails.deliverySn || "" }}</text>
          </view>
          <image
            v-if="ordersDetails.deliverySn"
            src="/static/logistics/3.png"
            @tap="copyFn(ordersDetails.deliverySn)"
          ></image>
        </view>
      </view>
    </view>
    <!--    <view class="info_wrapper">-->
    <!--      <u-time-line>-->
    <!--        <u-time-line-item nodeTop="20">-->
    <!--          &lt;!&ndash; 此处自定义了左边内容，用一个图标替代 &ndash;&gt;-->
    <!--          <template v-slot:node>-->
    <!--            <view class="u-node">-->
    <!--              &lt;!&ndash; 此处为uView的icon组件 &ndash;&gt;-->
    <!--              <image src="/static/logistics/2.png"></image>-->
    <!--              &lt;!&ndash;              <image src="/static/logistics/4.png"></image>&ndash;&gt;-->
    <!--            </view>-->
    <!--          </template>-->
    <!--          <template v-slot:content>-->
    <!--            <view class="logistics_item_info">-->
    <!--              <view class="u-order-title">待取件</view>-->
    <!--              <view class="u-order-desc"-->
    <!--                >[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view-->
    <!--              >-->
    <!--              <view class="u-order-time">2019-05-08 12:12</view>-->
    <!--            </view>-->
    <!--          </template>-->
    <!--        </u-time-line-item>-->
    <!--        <u-time-line-item nodeTop="20">-->
    <!--          &lt;!&ndash; 此处自定义了左边内容，用一个图标替代 &ndash;&gt;-->
    <!--          <template v-slot:node>-->
    <!--            <view class="u-node">-->
    <!--              &lt;!&ndash; 此处为uView的icon组件 &ndash;&gt;-->
    <!--              &lt;!&ndash;              <image src="/static/logistics/2.png"></image>&ndash;&gt;-->
    <!--              <image src="/static/logistics/4.png"></image>-->
    <!--            </view>-->
    <!--          </template>-->
    <!--          <template v-slot:content>-->
    <!--            <view class="logistics_item_info">-->
    <!--              <view class="u-order-desc"-->
    <!--                >【厦门市】思明区滨北路派件员 张国荣 联系电话-->
    <!--                13427801501正在为您派件</view-->
    <!--              >-->
    <!--              <view class="u-order-time">2019-12-06 22:30</view>-->
    <!--            </view>-->
    <!--          </template>-->
    <!--        </u-time-line-item>-->
    <!--        <u-time-line-item nodeTop="20">-->
    <!--          &lt;!&ndash; 此处自定义了左边内容，用一个图标替代 &ndash;&gt;-->
    <!--          <template v-slot:node>-->
    <!--            <view class="u-node">-->
    <!--              &lt;!&ndash; 此处为uView的icon组件 &ndash;&gt;-->
    <!--              &lt;!&ndash;              <image src="/static/logistics/2.png"></image>&ndash;&gt;-->
    <!--              <image src="/static/logistics/4.png"></image>-->
    <!--            </view>-->
    <!--          </template>-->
    <!--          <template v-slot:content>-->
    <!--            <view class="logistics_item_info">-->
    <!--              <view class="u-order-desc"-->
    <!--                >【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view-->
    <!--              >-->
    <!--              <view class="u-order-time">2019-12-06 22:30</view>-->
    <!--            </view>-->
    <!--          </template>-->
    <!--        </u-time-line-item>-->
    <!--      </u-time-line>-->
    <!--    </view>-->
  </view>
</template>

<script>
import { BASE_URL_IMAHE } from "../../../../utils/https";
import { getOrderInfoByOrderSnApi } from "@/api/orderApi";

export default {
  name: "index.vue",
  onLoad(options) {
    // 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
    this.orderSn=options.orderSn
  },
  onShow() {
    this.orderList();
  },
  data() {
    return {
      orderSn: '',
      ordersDetails: {},
    };
  },
  methods: {
    httpUrlFn(item) {
      return BASE_URL_IMAHE + item;
    },

    async orderList() {
      const res = await getOrderInfoByOrderSnApi(this.orderSn);
      console.log(res, "订单详情");
      if (res.code === 0) {
        this.ordersDetails = res.data.orderItems[0];
        console.log(this.ordersDetails, "this.ordersDetails");
      }
    },

    copyFn(item) {
      uni.setClipboardData({
        data: item, // data的值为你要复制的内容
        success: (res) => {
          console.log(res, "复制");
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.logistics_wrapper {
  padding: rpx(12);
  background: #f5f5f5;
  .header_wrapper {
    display: flex;
    background: #ffffff;
    border-radius: rpx(5);
    padding: rpx(12);
    .left_ {
      margin-right: rpx(6);
      > image {
        width: rpx(50);
        height: rpx(50);
        vertical-align: middle;
      }
    }
    .right_ {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      view {
        display: flex;
        align-items: center;
        font-size: rpx(14);
        font-weight: 400;
        color: #353535;
        > image {
          width: rpx(14);
          height: rpx(14);
        }
      }
      view:last-child {
        margin-top: rpx(4);
        > view {
          margin-right: rpx(6);
        }
      }
    }
  }
}

.logistics_item_info {
  background: #fafafa;
  border-radius: rpx(2);
  padding: rpx(6);
}

.u-node {
  width: rpx(14);
  height: rpx(14);
  //border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  //background: #d0d0d0;
  > image {
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
}

.u-order-title {
  color: #333333;
  font-weight: bold;
  font-size: 32rpx;
}

.u-order-desc {
  //color: rgb(150, 150, 150);
  //font-size: 28rpx;
  margin-bottom: 6rpx;

  font-size: rpx(13);
  font-weight: 400;
  color: #353535;
}

.u-order-time {
  color: rgb(200, 200, 200);
  font-size: 26rpx;
}

.info_wrapper {
  margin-top: rpx(8);
  background: #ffffff;
  border-radius: rpx(5);
  padding: rpx(16) rpx(12) rpx(16) rpx(20);
  height: 100%;
}

.info_wrapper::v-deep {
  .u-time-axis::before {
    border-left: rpx(2) dashed #dddddd !important;
    top: rpx(18) !important;
  }
}
</style>
